<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        a:<input type="text" v-model="a" />b:<input type="text" v-model="b" />
        a:{{a}} b:{{b}}<br>
        <!-- a乘以b的值是 {{a*b}} -->
        <!-- a乘以b的值是 : {{resultFn()}} -->
        <!-- a乘以b的值是 : {{resultFn}} -->
        <hr>
        <h1>computed和methods的区别</h1>
        <div v-show="judge">
            <!-- {{resultFn()}}   -->
            {{result}}
        </div>
        <button @click="setResult">点击我设置result的值</button>
        <button @click="judge=!judge">点击我控制显示隐藏</button>
    </div>
    <script>
        // 计算属性（派生属性 ，寄生属性） ：
        // 声明计算属性 ：computed
        // 一、computed和methods函数区别 
        // 1.函数需要执行 ，computd计算属性（本质是属性）,直接调用
        // 2.computed 性能比 methods好
        // 二、computed的2种写法 1.函数写法 2.对象的写法
        new Vue({
            el:"#app",
            data:{
                judge:true,
                a:10,
                b:20
            },
            methods:{
                resultFn(){
                    console.log("执行了");
                    return this.a * this.b;
                },
                setResult(){
                    this.result = 1;
                }
            },
            // 考虑性能；computed 如果结果值没有变化 computd 不会重新计算 直接使用缓存的结果
            computed:{
                // result:function(){
                //     console.log("result执行了");
                //     return this.a * this.b;
                // }
                result:{
                    get(){
                        console.log("获取reslut值的时候会执行get函数");
                        return this.a * this.b;
                    },
                    set(newvalue){
                        // console.log("set",newvalue);
                        this.a = newvalue;
                    }
                }
            }
        })


    </script>
</body>
</html>